<template>
  <div>
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="16">
          <el-button type="primary" @click="TaskVisible = true;getGroupList()" style="float: left">新建任务
          </el-button>
        </el-col>
        <el-col :span="8">
          <el-input placeholder="请输入任务名称" v-model="queryInfo.task_name" clearable @clear="getDataList">
            <el-button slot="append" icon="el-icon-search" @click="getDataList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="dataList" border stripe>
        <!--        <el-table-column type="index">-->
        <!--        </el-table-column>-->
        <el-table-column prop="groupId" label="人群id"></el-table-column>
        <el-table-column prop="missionName" label="任务名称"></el-table-column>
        <el-table-column prop="groupName" label="人群名称"></el-table-column>
        <el-table-column prop="creater" label="创建人"></el-table-column>
        <el-table-column prop="addTime" label="添加时间"></el-table-column>
        <el-table-column prop="pushTime" label="推送时间"></el-table-column>
        <el-table-column prop="targetNum" label="目标人群数量"></el-table-column>
        <el-table-column prop="sendNum" label="推送数量"></el-table-column>
        <el-table-column label="分析" width="140">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="点击分析" placement="top" :enterable="false">
              <el-button type="text" icon="el-icon-s-marketing" @click="handleAnalyse(scope.row)"
                style="font-size:25px">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <el-dialog title="创建任务(短信)" :visible.sync="TaskVisible" width="40%">
      <el-form :model="taskForm" :rules="rules" ref="taskForm">
        <el-form-item label="任务名称" label-width="80px" prop="missionName">
          <el-input v-model="taskForm.missionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目标人群" label-width="80px" prop="groupName">
          <el-select v-model="taskForm.groupName" placeholder="请选择目标人群">
            <el-option v-for="item in groupList" :key="item.group_id" :label="item.group_name" :value="item.group_name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <h1 style="float:left"><i class="el-icon-s-promotion"></i>推送内容</h1>
        </el-row>
        <el-form-item label="通知内容" label-width="80px" prop="messageInfo">
          <el-input v-model="taskForm.messageInfo" type="textarea" autocomplete="off"></el-input>
        </el-form-item>
        <el-row>
          <h1 style="float:left"><i class="el-icon-s-tools"></i>推送设置</h1>
        </el-row>
        <el-form-item label="" label-width="80px" prop="pushPattern">
          <el-radio-group v-model="taskForm.pushPattern">
            <el-radio :label="'立即推送'"></el-radio>
            <el-radio :label="'定时推送'"></el-radio>
            <el-radio :label="'周期性推送'"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="block" v-if="taskForm.pushPattern == '定时推送'">
          消息将于
          <el-date-picker v-model="time1" type="datetime" size="mini" placeholder="选择日期时间" align="right"
            value-format="yyyy-MM-dd hh:mm:ss">
          </el-date-picker>
          准时推送
        </div>
        <div class="block" v-if="taskForm.pushPattern == '周期性推送'">
          消息将于
          <el-date-picker v-model="time2" type="datetime" size="mini" placeholder="选择日期时间" align="right"
            value-format="yyyy-MM-dd hh:mm:ss">
          </el-date-picker>
          开始推送，
          <el-checkbox v-model="checked">结束时间</el-checkbox>
          <el-date-picker v-model="time3" type="datetime" size="mini" placeholder="选择日期时间" align="right"
            :disabled="!checked" value-format="yyyy-MM-dd hh:mm:ss">
          </el-date-picker>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TaskVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('taskForm')">确 定</el-button>
      </span>
    </el-dialog>
    <analyseDialog v-if="analysevisible" :visible.sync="analysevisible" :dialog_params="dialog_params">
    </analyseDialog>
  </div>
</template>

<script>
  import analyseDialog from '../components/dialog.vue'
  export default {
    components: {
      analyseDialog
    },
    data() {
      return {
        queryInfo: {
          missionType: '短信',
          task_name: '',
          pageNo: 1,
          pageSize: 10
        },
        analysevisible: false,
        groupList: [],
        dataList: [],
        total: 0,
        checked: false,
        time1: '',
        time2: '',
        time3: '',
        TaskVisible: false,
        taskForm: {
          groupId: 101, //用户ID
          groupName: '', //目标人群名称
          missionName: '', //任务名
          messageInfo: '', //消息内容
          pushPattern: '', //推送模式
          pushStartTime: '',
          pushEndTime: '',
        },
        rules: {
          groupName: [{
            required: true,
            message: '请选择目标人群',
            trigger: 'change'
          }],
          missionName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          messageInfo: [{
            required: true,
            message: '请输入消息内容',
            trigger: 'blur'
          }],
          pushPattern: [{
            required: true,
            message: '请选择推送模式',
            trigger: 'change'
          }]
        },
      }
    },
    created() {
      this.getDataList()
    },
    methods: {
      getDataList() {
        this.$http.post('http://127.0.0.1:8080/userprofile-platform/v1/Market/marketList', this.queryInfo).then(res => {
          if (res.data.flag) {
            this.dataList = res.data.data.list
            this.total = res.data.data.total
          }
        })
      },
      getGroupList() {
        for (let i in this.taskForm) {
          if (i !== 'groupId') {
            this.taskForm[i] = ''
          }
        }
        this.$http.post('http://127.0.0.1:8080/userprofile-platform/v1/UserGroup/distinctGroupname', {}).then(res => {
          if (res.data.flag) {
            this.groupList = res.data.data
          }
        })
      },
      handleConfirm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.taskForm.pushPattern == '定时推送') {
              this.taskForm.pushStartTime = this.time1
              this.taskForm.pushEndTime = this.time1
            } else if (this.taskForm.pushPattern == '周期性推送') {
              this.taskForm.pushStartTime = this.time2
              this.taskForm.pushEndTime = this.time3
            }
            this.$http.post('http://127.0.0.1:8080/userprofile-platform/v1/Market/shortMessageMarket', this.taskForm).then(res => {
              if (res.data.flag) {
                this.$message.success(res.data.message)
                this.TaskVisible = false
                this.getDataList()
              } else {  
                this.$message.error(res.data.msg)
              }
            })
          }
        })
      },
      handleSizeChange(newSize) {
        this.queryInfo.pageSize = newSize
        this.getDataList()
      },
      handleCurrentChange(newPage) {
        this.queryInfo.pageNo = newPage
        this.getDataList()
      },
      handleAnalyse(rowData) {
        this.analysevisible = true
        this.dialog_params = {
          title: '短信分析结果',
          missionType: '短信',
          groupId: rowData.groupId,
          addTime: rowData.addTime,
          width: '50%',
          modal: true,
        }
      },
    }
  }

</script>

<style scoped>
  .el-card {
    padding: 5px;
  }

  .el-select {
    width: 100%;
  }

</style>
